<template>
  <div class="bigbox">
    <!-- 页面头部导航栏折叠 -->
    <div class="topbox" :style="{height:isheight+'px'}">
      <el-form :model="form" ref="form"  label-position="left" label-width="80px" onsubmit="return false">
         <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="qiyelist"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  size="small"
                  range-separator="-"
                  start-placeholder="开始日期"
                  style="width: 100%;"
                  value-format="yyyy-MM-dd"
                  end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="巡视类型">
              <el-select v-model="form.tourType" placeholder="请选择巡视类型" size="small" style="width: 100%;">
                  <el-option label="全部" value=" "></el-option>
                  <el-option v-for="item in xingzhilist" :key="item.value" :label="item.text" :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="5">
            <el-form-item label="业务类型">
              <el-select v-model="form.businessType"  size="small" style="width: 100%;">
                <el-option v-for="(item,index) in yewulist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="4" v-show="isshow">
              <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="请选择状态" size="small" style="width: 100%;">
                    <el-option label="全部" value=" "></el-option>
                    <el-option v-for="item in zhuangtailist" :key="item.value" :label="item.text" :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="isshow?24:4">
              <!-- <el-form-item> -->
                <div style="text-align:  right!important;">
                  <el-button  size="small" @click="chongzhi">重 置</el-button>
                  <el-button  size="small" type="primary" @click="getdatalist()">查 询</el-button>
                  <el-button type="text" v-if="isshow" class="shou" @click="zedie">收起 <i class="el-icon-arrow-up"></i> </el-button>
                  <el-button type="text" v-else class="shou" @click="zedie">展开 <i class="el-icon-arrow-down"></i> </el-button>
                </div>
              <!-- </el-form-item> -->
            </el-col>
         </el-row>
        </el-form>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox" :style="{height: `calc(${num}% - ${number}px)`}">
      <!-- 主体盒子头部新增/导出等 -->
      <div class="title">
        <div>巡视任务单</div>
        <div class="atopanniu">
          <div style="margin-right: 10px;">
            <el-button size="small" type="primary" @click="newadd" ><i class="el-icon-plus" ></i>新 增</el-button>
          </div>
          <!-- 封装导出/刷新结构 -->
          <TopTitle @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTitle>
        </div>
      </div>
      <!-- 表格盒子 -->
      <div class="table">
        <template>
          <el-table
          :size="iissize"
          border
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 1px)"
            :data="tableData"
            style="width: 100%">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              prop="taskNo"
              label="任务单编号">
            </el-table-column>
            <el-table-column
              prop="orgName"
              label="用电企业"
              width="180">
            </el-table-column>
            <el-table-column
              prop="businessTypeName"
              align="center"
              label="业务类型">
            </el-table-column>
            <el-table-column
              prop="tourTypeName"
              align="center"
              label="巡视类型">
            </el-table-column>
            <el-table-column
              prop="tourDate"
              label="巡视日期"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="xsfzrName"
              align="center"
              label="巡视人">
            </el-table-column>
            <el-table-column
              prop="shrName"
              align="center"
              label="确认人">
            </el-table-column>
            <el-table-column
              prop="statusName"
              align="center"
              label="任务状态"
              width="180">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center">
              <template #default="{row}">
                <span style="margin-right: 10px;"><el-button type="text" @click="liulan(row,true)" >浏览</el-button> </span>
                <span v-if="row.status=='10'">
                  <!-- <span> -->
                  <el-button type="text" @click="liulan(row)">编辑</el-button>
                  <el-button type="text" @click="delrenwu(row)">删除</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 分页区域 -->
      <div class="fenye">
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="formlist._pageNo"
                :page-size="10"
                @current-change="getdatalist"
                :total="+totalCount">
              </el-pagination>
      </div>
      <!-- dialog新增弹窗 -->
      <div>
        <DiaLogkuang ref="DiaLogkuang"  :qiyelist="qiyelist" :yewulist="yewulist"
        @submit="getdatalist()" :bianjiobj="bianjiobj" :xingzhilist="xingzhilist"
        ></DiaLogkuang>
      </div>
    </div>
  </div>
</template>

<script>
import { getuserlistapi } from '@/api/analysis'
import { getloginuserapi, getyonghuxialaapi } from '@/api/cycle'
import { saveAs } from 'file-saver'
import TopTitle from '@/components/TopTitle/index.vue'
import DiaLogkuang from '@/views/workorder/DiaLogkuang.vue'
import { gettreelist, gettreexiaji } from '../../api/userscreen'
import { getyewuleiapi } from '@/api/guidelines'
import { getgongdanapi,exporttableapi,delgongdanapi } from '@/api/workorder'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle,
    DiaLogkuang
},
  data() {
    return {
      date:[],
      iissize: 'medium',
      number:90,
      num:100,
      form:{orgNo:'',tourType:' ',status:' ',businessType:''},
      isheight: 80,
      qiyelist: [],
      isshow: false,
      yewulist: [],
      loading: false,
      tableData: [],
      formlist: {
        _pageNo: 0,
        _pageSize:10
      },
      totalCount: '',
      props: {
        label: 'bizOrgName',
      },
      bizOrgName: '',
      xingzhilist: [],
      zhuangtailist: [],
      bianjiobj:{}
    };
  },

  async mounted() {
   await this.getlaarr()
   this.getdatalist()
  },

  methods: {
    // // 浏览巡视任务工单详情
    liulan(row,flag) {
      // this.bianjiobj = row
      this.$refs.DiaLogkuang.toupdate(row,flag)
      // this.$refs.DiaLogkuang.isshow=false
    },
    newadd() {
      this.$refs.DiaLogkuang.dialogVisible = true
      this.$refs.DiaLogkuang.chushihua()
    },
    // 获取表格数据
    async getdatalist() {
      this.loading = true;
      const res = await getgongdanapi({
        _pageNo: this.formlist._pageNo - 1, _pageSize: this.formlist._pageSize,
        startDate: this.date[0], endDate: this.date[1],
        orgNo: this.form.bizOrgNo, ...this.form
      })
      this.tableData = res.data.list
      this.totalCount=res.data.totalCount
      this.loading = false
    },
    // 折叠导航栏面板
    zedie() {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
        this.number=150
      } else {
        this.isheight = 80
        this.number=90
      }
    },
           // 调节表格密度
   command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 导出
    async daochu() { 
      const res= await exporttableapi({
        _pageNo: this.formlist._pageNo - 1, _pageSize: this.formlist._pageSize,
        startDate: this.date[0], endDate: this.date[1],
        orgNo: this.form.bizOrgNo, ...this.form,
        isParams: true
      })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '巡视工单.xls')
    },
    // 刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
         //  获取当前时间戳
    gettime() {
      this.date=[]
      const date = new Date()
      const year = date.getFullYear() // 年
       const month = date.getMonth() + 1 // 月
      const day = date.getDate()<10?'0'+ date.getDate(): date.getDate()
       this.date.push(year + '-' + month +'-'+ '01' )
       this.date.push(year + '-' + month + '-' + day) 
    },
    // 获取 业务类型，状态，巡视类型数据
    async getlaarr() {
      const {data:{list}} = await getuserlistapi()
      this.qiyelist = list
      const ress = await getyewuleiapi({ dictType: 'XSGL_ZYZDSLX' })
      this.yewulist = ress.data.list
      const res = await getyewuleiapi({ dictType: 'XSGL_XSXZ' })
      this.xingzhilist = res.data.list
      const resss = await getyewuleiapi({ dictType: 'XSGL_JHZT' })
      this.zhuangtailist = resss.data.list
      this.gettime()
    },
    // 重置
    async chongzhi() {
      this.form.businessType = ''
      this.form.tourType = ' '
      this.form.status = ' '
      this.form.orgNo=''
      await this.getlaarr()
      this.getdatalist()
    },
    // 删除工单
    delrenwu(row) {
      console.log(row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delgongdanapi({id:row.id})
        this.$message.success('删除成功')
        this.getdatalist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.option{
  height: auto;
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .topbox{
    background-color: #fff;
    padding: 20px;
  }
  .bodybox{
     padding: 20px;
     background-color: #fff;
     margin-top: 10px;
     position: relative;
     .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .atopanniu{
          display: flex ;
        }
        
     }
     .fenye{
      text-align: right;
      margin-top: 10px;
     }
     .table{
      height: 88%;
     }
  }
}
.bodybox{
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
}

</style>